<template>
    <div>
     <div class="pink">
     </div>
     <div class="yuan">{{seconds.length}}0分</div>
     <div class="content" v-for="item in seconds" :key="item.id">
         <div class="one"><i :class="item.icon"></i></div>
         <div class="two">
             <p>{{item.name}}</p>
             <p>{{item.time}}</p>
         </div>
         <div class="three">
            + {{item.add}}
         </div>
     </div>
    </div>
</template>

<script>
    export default {
        data(){
      return{
           seconds:[
               {   id:1,
                   icon:"el-icon-coin",
                   name:"充值十元",
                   time:"2021-12-2 14:00",
                   add:10
               },
                 { id:2,
                   icon:"el-icon-money",
                   name:"消费金额十元",
                   time:"2021-12-2 14:00",
                   add:10
               },
                 { id:3,
                   icon:"el-icon-money",
                   name:"消费金额十元",
                   time:"2021-12-2 14:00",
                   add:10
               },
                 { id:4,
                   icon:"el-icon-money",
                   name:"消费金额十元",
                   time:"2021-12-2 14:00",
                   add:10
               },
                 { id:5,
                   icon:"el-icon-money",
                   name:"消费金额十元",
                   time:"2021-12-2 14:00",
                   add:10
               },
           ]
      }
        },
          methods: {
    me() {
      this.$router.push("/mine");
    },
  },
    }
</script>

<style scoped>
.tiao {
  position: absolute;
  top: 3vh;
  left: 4vw;
  font-weight: bold;
  color: #409EFF;
  font-size: 24px;
}
 .pink{
   width: 100vw;
   height: 18vh;
   background: linear-gradient(#409EFF, #d4e8fc);
   color: #fff;
   position: relative;
 }
 .yuan{
     width: 28vw;
     height: 15vh;
     background: #f5e5e7;
     border-radius: 50vh;
     position: absolute;
     top: 14vh;
     left: 34vw;
     font-size: 5vh;
     color: #fff;
     text-indent: 5vw;
     line-height: 15vh;
 }

 .content{
     width: 100vw;
     height: 10vh;
     /* background: paleturquoise; */
     border-bottom: 1px solid #ccc;
     display: flex;
     align-items: center;
 }
 .one{
     width: 20vw;
     height: 10vh;
     /* background: plum; */
     font-size: 4vh;
    line-height: 10vh;
    margin-left: 2vw;
 }
 .two{
     width: 60vw;
     height: 10vh;
     /* background: pink; */
     line-height: 4vh;
     font-size: 2vh;
     margin-top: 2vh;
 }
 
</style>